<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: Liubuzhu
  Date: 2023/12/15
  Time: ฅ(΅•ㅅ•΅❀)ฅ 12:46
--%>
<%@ page contentType="text/html;charset=UTF-8" isELIgnored="false" language="java" %>
<html lang="en">

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>个人信息页</title>

	<link rel="stylesheet" href="<c:url value="/css/bootstrap.min.css"/>">
	<script src="<c:url value="/js/bootstrap.bundle.min.js"/>"></script>
	<style>
		.back {
			background-image: url("<c:url value="/img/login/bg.png"/>");
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center;
			height: 100vh;
		}

		.custom-file-input {
			display: none;
		}

		.profile-image {
			max-width: 150px;
			cursor: pointer;
		}
		.form-style {
			border: 1px solid greenyellow;
			padding: 20px;
			border-radius: 15px;
		}
	</style>
</head>

<body class="bg-light back">
<jsp:include page="/view/common/header.jsp"></jsp:include>
<div class="container" style="margin-top: 20px;">
	<main>
		<div class="col-md-7 col-lg-8 mx-auto">
			<h4 class="mb-3 text-center" style="color: aliceblue;">个人信息页</h4>
			<form class="needs-validation form-style" novalidate style="background-color: whitesmoke;" action="<c:url value="/player?action=update&playerId=${sessionScope.user.playerId}"/>" method="post" enctype="multipart/form-data">
				<div class="row g-3">
					<div class="col-12">
						<label for="file" class="form-label">
							<img id="image" src="<c:url value="/img/user/${sessionScope.user.playerImage}"/>" alt="UserImage" class="mt-2 profile-image" width="70px" height="70px">
						</label>
						<input type="file" class="custom-file-input" name="file" id="file" accept="image/jpg,image/jpeg,image/png" onchange="changeFile()" required>
						<div class="invalid-feedback">
							请上传头像。
						</div>
					</div>

					<div class="col-12">
						<label for="name" class="form-label">用户名</label>
						<div class="input-group has-validation">
							<input type="text" class="form-control" name="name" id="name" placeholder="请输入姓名..." value="${sessionScope.user.playerName}" required>
							<div class="invalid-feedback">
								请输入姓名。
							</div>
						</div>
					</div>

					<div class="col-12">
						<label for="username" class="form-label">账号</label>
						<div class="input-group has-validation">
							<input type="text" class="form-control" name="username" id="username" placeholder="请输入用户名..." value="${sessionScope.user.playerUsername}" required>
							<div class="invalid-feedback">
								请输入用户名。
							</div>
						</div>
					</div>

					<div class="col-12">
						<label for="email" class="form-label">邮箱</label>
						<input type="email" class="form-control" name="email" id="email" placeholder="请输入邮箱..." value="${sessionScope.user.playerEmail}" required>
						<div class="invalid-feedback">
							请输入有效的邮箱地址。
						</div>
					</div>

					<div class="col-12">
						<label for="contact" class="form-label">联系方式</label>
						<input type="text" class="form-control" name="contact" id="contact" placeholder="请输入联系方式..." value="${sessionScope.user.playerContact}" required>
						<div class="invalid-feedback">
							请输入联系方式。
						</div>
					</div>
				</div>

				<hr class="my-4">

				<button class="w-100 btn btn-primary btn-lg" type="submit">保存修改</button>
			</form>
		</div>
	</main>
</div>
<script>
	function changeFile() {
		let image = document.getElementById('image');
		// 获得文件对象
		let name = document.getElementById('file').files[0];
		let url;
		// 如果name不为空，创建相对的本地blob链接
		if (name) {
			url = window.URL.createObjectURL(name);
		}
		// 渲染img
		image.src = url;
	}
</script>
</body>

</html>
